<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  </head>
  <body>
    <div>
      <ul class="nm_ul">
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li id="zhangsan">13333</li>
        <li class="lisi">1123</li>
        <li class="lisi names">1213</li>
        <li class="names">1213</li>
        <li>1213</li>
        asdas
      </ul>
    </div>
    <button>隐藏</button>
    <button>隐藏或显示</button>
    <button>显示</button>
  </body>
  <script>
    // var btnObj = $('<button>按钮</button>')
    // btnObj.attr('id', 'abc')
    // $('body').html(btnObj)
    $(function () {
      //创建两个<li>元素
      //   var li_1 = $('<li></li>') // 创建第一个<li>元素
      //   var li_2 = $('<li></li>') // 创建第二个<li>元素
      //   li_1.html('li1')
      //   li_2.html('li2')
      var parent = $('.nm_ul') // 获取<ul>节点。<li>的父节点
      //   parent.append(li_1) // 添加到<ul>节点中，使之能在网页中显示
      //   parent.append(li_2) // 可以采取链式写法：$parent.append($li_1).append($li_2);
      //   parent.append(li_1).append(li_2).append('<li>ksa</li>')
      //   console.log($('.nm_ul').children('#zhangsan'))
      //   console.log($('.nm_ul').find('#zhangsan'))
      console.log($('#zhangsan').parents())
      console.log($('#zhangsan').nextAll())
      console.log($('#zhangsan').siblings('li:eq(2)'))
      console.log($('li').not('.names'))
      $('li').click(function () {
        console.log($(this).html())
      })
      $('button:first').click(function () {
        $('div').hide() //隐藏
      })
      $('button:eq(1)').click(function () {
        $('div').toggle() //显示或隐藏
      })
      $('button:last').click(function () {
        $('div').show() //显示
      })
    })
  </script>
</html>
